<template>
  <div class="vbox flex1" style="overflow-y:hidden">
    <el-table
      :height="height"
      :row-class-name="rowClassName"
      header-row-class-name="header-row-class"
      highlight-current-row
      @current-change="currentChange"
      @selection-change="selectionChange"
      @row-dblclick="rowDblClick"
      @row-click="rowClick"
      @cell-dblclick="cellDblclick"
      @cell-click="cellClick"
      @select="select"
      @select-all="selectAll"
      ref="basetable"
      v-loading.body="loading"
      element-loading-text="正在努力加载..."
      :data="data"
      style="width: 100%;"
    >
      <el-table-column v-if="selection" type="selection" width="55"></el-table-column>
      <template v-for="c in columns">
        <el-table-column
          :key="c.id"
          :prop="c.prop"
          :align="c.align"
          :sortable="c.sortable"
          :formatter="c.formatter"
          :label="c.label"
          :width="c.width"
          :fixed="c.fixed"
          :show-overflow-tooltip="c.showTooltip==0 ? false : true"
          v-if="!c.custom"
        ></el-table-column>
        <el-table-column
          v-else
          :key="c.id"
          :prop="c.prop"
          :align="c.align"
          :sortable="c.sortable"
          :formatter="c.formatter"
          :label="c.label"
          :width="c.width"
          :fixed="c.fixed"
          :show-overflow-tooltip="c.showTooltip==0 ? false : true"
        >
          <template slot-scope="scope">
            <div v-if="c.code == 'commodityCode'">
              <div>
                <el-button
                  @click="viewOrder(scope.row)"
                  size="large"
                  type="text"
                >{{scope.row.commodityCode}}</el-button>
              </div>
              <div>{{scope.row.afterCode}}</div>
            </div>
            <div v-if="c.code == 'recipientsName'">
              <div>{{scope.row.senderName}}</div>
              <div class="color9">{{scope.row.recipientsName}}</div>
            </div>
            <div v-if="c.code == 'weight_price'">
              <div>{{scope.row.weight+" "+scope.row.unit }}</div>
              <div class="color9">{{scope.row.price+" RMB"}}</div>
            </div>
            <div v-if="c.code == 'destination'">
              <div>{{scope.row.senderAddress}}</div>
              <div class="color9">{{scope.row.destination}}</div>
            </div>
            <div v-if="c.code == 'recipientsAddress'">
              <div>{{scope.row.senderAddress}}</div>
              <div class="color9">{{scope.row.recipientsAddress}}</div>
            </div>
            <div v-if="c.code == 'rmkState'">
              <div>
                <i
                  v-if="scope.row.rmkState==1"
                  class="el-icon-question"
                  style="font-size:20px;color:#f40;"
                ></i>
                <i
                  v-if="scope.row.rmkState==0"
                  class="el-icon-success"
                  style="font-size:20px;color:#00aaff"
                ></i>
              </div>
            </div>
          </template>
        </el-table-column>
      </template>
      <el-table-column
        :width="optionWidth"
        fixed="right"
        v-if="optionBtns && optionBtns.length>0"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-auth="b.code"
            style="margin:5px 5px 0 0;"
            size="mini"
            v-for="b in optionBtns"
            :icon="b.icon"
            :type="b.type"
            :key="b.code"
            :disabled="scope.row.editabled == 0"
            v-if="!b.render ? true: b.render(scope.row)"
            @click.stop="handlerOption(b.code,scope.row)"
            v-text="b.text"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align:right;padding:5px 5px 0 5px;">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: null,
      loading: false,
      total: 0,
      data: [],
      selections: [],
      curRowId: "",
      orderTracks: []
    };
  },
  computed: {
    columns() {
      return this.cls.filter(function(c) {
        return !c.isHidden;
      });
    }
  },
  mounted() {
    let me = this;
    if (me.autoLoad) {
      me.load();
    }
  },
  methods: {
    showPopover(row) {
      this.$set(row, "visible", true);
    },
    hidePopover(row) {
      this.$set(row, "visible", false);
    },
    cellMouseEnter(row, column) {},
    selectionChange(selection) {
      this.$emit("selection-change", selection);
      this.selections = selection;
    },
    getSelections() {
      return this.selections;
    },
    currentChange(currentRow, oldCurrentRow) {
      this.$emit("current-change", currentRow, oldCurrentRow);
    },
    rowDblClick(row, event) {
      this.$emit("row-dblclick", row, event);
    },
    rowClick(row, event, column) {
      this.$emit("row-click", row, event, column);
    },
    cellClick(row, column, cell, event) {
      this.$emit("cell-click", row, column, cell, event);
    },
    cellDblclick(row, column, cell, event) {
      this.$emit("cell-dblclick", row, column, cell, event);
    },
    select(selection, row) {
      this.$emit("select", selection, row);
    },
    selectAll(selection) {
      this.$emit("selectAll", selection);
    },
    clearSelection() {
      this.$refs["basetable"].clearSelection();
    },
    toggleRowSelectionByIds(ids, selected) {
      let me = this;
      ids.forEach(id => {
        let row = me.data.find(item => {
          return item.id == id;
        });
        me.toggleRowSelection(row, true);
      });
    },
    toggleRowSelection(row, selected) {
      this.$refs["basetable"].toggleRowSelection(row, selected);
    },
    setCurrentRow(row) {
      if (row) {
        this.$refs["basetable"].setCurrentRow(row);
      } else {
        this.$refs["basetable"].setCurrentRow();
      }
    },
    doLayout() {
      this.$refs["basetable"].doLayout();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.load();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.load();
    },
    generateParam() {
      let me = this;
      me.param.pageNo = me.currentPage;
      if (!me.pageSize) {
        me.pageSize = me.pageSizes[0];
      }
      me.param.pageSize = me.pageSize;
    },
    setCurPage(page) {
      this.currentPage = page;
    },
    initLoad() {
      this.currentPage = 1;
      this.load();
    },
    load() {
      let me = this;
      if (me.url != "") {
        me.generateParam();
        me.loading = true;
        me.$http.ajax({
          url: me.url,
          code: me.code,
          data: me.param,
          success: res => {
            me.loading = false;
            me.total = res[me.totalDisplay];
            me.data = res[me.listDisplay];
          },
          error() {
            me.loading = false;
          }
        });
      }
    },
    handlerOption(btnCode, row) {
      this.$emit("handlerOption", btnCode, row);
    },
    clearData() {
      this.data = [];
      this.currentPage = 1;
      this.total = 0;
    },
    viewOrder(row) {
      this.$emit("view-order", row);
    }
  },
  props: {
    rowClassName: {
      type: Function,
      default() {}
    },
    selection: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ""
    },
    method: {
      type: String,
      default: "get"
    },
    param: {
      type: Object,
      default() {
        return {};
      }
    },
    code: {
      type: String,
      default: "htk-admin"
    },
    autoLoad: {
      type: Boolean,
      default: true
    },
    //列参数
    cls: {
      type: Array,
      required: true,
      default() {
        return [];
      }
    },
    optionBtns: {
      type: Array,
      default() {
        return [];
      }
    },
    optionWidth: {
      type: Number,
      default: 150
    },
    height: {
      type: Number,
      default: 300
    },
    totalDisplay: {
      type: String,
      default: "total"
    },
    listDisplay: {
      type: String,
      default: "records"
    },
    mheight: {
      type: Number,
      default: 0
    },
    pageSizes: {
      type: Array,
      default() {
        return [10, 15, 25, 30, 35, 40];
      }
    },
    pageSizeProp: {
      type: Number,
      default: 10
    }
  }
};
</script>
<style>
.color9 {
  color: #999;
}
.font16 {
  font-size: 16px;
}
.header-row-class {
  color: #333;
  background: #ebecf0;
}
.el-table .warning-row {
  color: #f56c6c;
}
.el-table .danger-row {
  color: #333;
  font-weight: bold;
}
</style>


